<template>
    <VueCustomeTable ref="CustomTableRef" :page="page" :index="true" :selected="true" :columns="columns" :loading="loading"
        :data="tableData" :operation-column="operationColumn" @sort-change="sortChange" @handle-operation="handleOperation"
        @fliter-change="filterChange" @selection-change="selectionChange">
    </VueCustomeTable>
</template>
  
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { VueCustomeTable } from 'vue-custome-components'
import { personApi } from '../mock/index'
const CustomTableRef = ref();
const page = reactive({
    currentPage: 1,
    total: 3,
    pageSize: 50
})
const operationColumn = {
    'label': '操作',
    'width': 180,
    'fixed': 'right',
    btns: [
        {
            label: '修改',
            icon: 'Edit',
            type: 'edit',
            style: 'primary',
        },
        {
            label: '删除',
            icon: 'Delete',
            type: 'del',
            style: 'danger'
        },
    ]
}
const columns = [
    {
        'prop': 'date',
        'label': '开始时间',
        'width': 150,
        'formatter': (row: any) => {
            return row['date']
        },
        'sort': true,
        'search': {
            'type': 'date'
        }
    },
    {
        'prop': 'dateTime',
        'label': '结束时间',
        'width': 150,
        'formatter': (row: any) => {
            return row['dateTime']
        },
        'sort': true,
        'search': {
            'type': 'date'

        }
    },
    {
        'prop': 'name',
        'label': '姓名',
        'width': 120,
        'search': {
            'type': 'input'
        }
    },
    {
        'label': '国家',
        'prop': 'city',
        'width': 120,
        'search': {
            'type': 'select',
            'options': [
                { label: '选项一', value: 1 },
                { label: '选项二', value: 2 }
            ]

        }
    },
    {
        'label': '城市',
        'prop': 'state',
        'width': 120,
        'search': {
            'type': 'remoteSelect',
            'multiple': true,
            'remoteApi': (val: string) => {
                return new Promise((resolve) => {
                    setTimeout(() => {
                        resolve([
                            { label: '城市1', value: 1 },
                            { label: '城市2', value: 2 },
                            { label: '城市3', value: 3 },
                            { label: '城市4', value: 4 }
                        ] as any)
                    }, 1000);
                })
            }

        }
    },
    {
        'label': '地址',
        'prop': 'address',
        'width': 600,
        'search': {
            'type': 'input'
        }
    },
    {
        'label': 'zip',
        'prop': 'zip',
        'width': 120,
        'search': {
            'type': 'input'
        }
    }
]
const tableData = ref([])

const getData = async() => {
    loading.value = true
    let res: any = await personApi()
    tableData.value = res.data
    loading.value = false
    CustomTableRef.value.toggleRowSelection(
        [
            {
                id: '1',
                date: '2016-05-01',
                dateTime: '2016-05-01 10:00:00',
                name: 'Tom',
                state: 'California',
                city: 'Los Angeles',
                address: 'No. 189, Grove St, Los Angeles',
                zip: 'CA 90036 CA 90036 CA 90036 CA 90036',
            },
            {
                id: '2',
                date: '2016-05-02',
                dateTime: '2016-05-02 12:00:00',
                name: 'Tom',
                state: 'California',
                city: 'Los Angeles',
                address: 'No. 189, Grove St, Los Angeles',
                zip: 'CA 90036',
            },
            {
                id: '3',
                date: '2016-05-03',
                dateTime: '2016-05-03 14:00:00',
                name: 'Tom',
                state: 'California',
                city: 'Los Angeles',
                address: 'No. 189, Grove St, Los Angeles',
                zip: 'CA 90036',
            },
        ]
    )
}
onMounted(()=>{
    getData()
})
const loading = ref<boolean>(false)
const handleOperation = (type: string, data: any) => {
    getData()

}
const filterChange = (filters: any) => {
    getData()
}
const sortChange = (filters: any, sort: any) => {
    getData()
}
const selectionChange = (data: any) => {
    console.log(data)
}

</script>
  